const DdDrag: any = {};

// tslint:disable-next-line: only-arrow-functions
DdDrag.install = function(Vue) {
  Vue.directive('dialogdrag', {
    bind(
      el: { querySelector: (arg0: string) => any },
      binding: any,
      vnode: any,
      oldVnode: any
    ) {
      // 弹框可拉伸最小宽高
      const minWidth: number = 400;
      const minHeight: number = 300; // 初始非全屏
      let isFullScreen: boolean = false; // 当前宽高
      let nowWidth: number = 0;
      let nowHight: number = 0; // 当前顶部高度
      let nowMarginTop: number = 0; // 获取弹框头部（这部分可双击全屏）
      const w =
        document.documentElement.clientWidth || document.body.clientWidth;
      const h =
        document.documentElement.clientHeight || document.body.clientHeight;

      const dialogHeaderEl = el.querySelector('.el-dialog__header'); // 弹窗
      const dialogFootEl = el.querySelector('.el-dialog__footer'); // 弹窗
      const dragDom = el.querySelector('.el-dialog'); // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
      dragDom.style.overflow = 'auto'; // 清除选择头部文字效果
      dialogHeaderEl.onselectstart = new Function('return false'); // 头部加上可拖动cursor
      dialogHeaderEl.style.cursor = 'move'; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);

      const sty =
        dragDom.currentStyle || window.getComputedStyle(dragDom, null);

      const moveDown = (e: { clientX: number; clientY: number }) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft;
        const disY = e.clientY - dialogHeaderEl.offsetTop; // 获取到的值带px 正则匹配替换

        let styL: number;
        let styT: number; // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px

        if (sty.left.includes('%')) {
          styL =
            +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
          styT =
            +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
        } else {
          styL = +sty.left.replace(/\px/g, '');
          styT = +sty.top.replace(/\px/g, '');
        }

        // tslint:disable-next-line: only-arrow-functions
        document.onmousemove = function(e) {
          dragDom.offsetWidth;
          const left: number = (w - dragDom.offsetWidth) / 2;
          const top: number = h - dragDom.offsetHeight - 0.15 * h;

          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX;
          const t = e.clientY - disY; // 移动当前元素

          let x = l + styL;
          let y = t + styT;
          if (left <= -x) {
            x = -left;
          }

          if (left <= x) {
            x = left;
          }

          if (0.15 * h <= -y) {
            y = -0.15 * h;
          }

          if (top <= y) {
            y = top;
          }

          dragDom.style.left = `${x}px`;
          dragDom.style.top = `${y}px`; // 将此时的位置传出去 //binding.value({x:e.pageX,y:e.pageY})
          // }
        };

        // tslint:disable-next-line: only-arrow-functions
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
      dialogHeaderEl.onmousedown = moveDown; // 双击头部效果
      dialogHeaderEl.ondblclick = (e: any) => {
        // tslint:disable-next-line: triple-equals
        if (isFullScreen == false) {
          nowHight = dragDom.clientHeight;
          nowWidth = dragDom.clientWidth;
          nowMarginTop = dragDom.style.marginTop;
          dragDom.style.left = 0;
          dragDom.style.top = 0;
          dragDom.style.height = '100VH';
          dragDom.style.width = '100VW';
          dragDom.style.marginTop = 0;
          isFullScreen = true;
          dialogHeaderEl.style.cursor = 'initial';
          dialogHeaderEl.onmousedown = null;
        } else {
          dragDom.style.height = 'auto';
          dragDom.style.width = nowWidth + 'px';
          dragDom.style.marginTop = nowMarginTop;
          isFullScreen = false;
          dialogHeaderEl.style.cursor = 'move';
          dialogHeaderEl.onmousedown = moveDown;
        }
      }; // 拉伸
      const resizeEl = document.createElement('div');
      dragDom.appendChild(resizeEl); // 在弹窗右下角加上一个10-10px的控制块
      resizeEl.style.cursor = 'se-resize';
      resizeEl.style.position = 'absolute';
      resizeEl.style.height = '10px';
      resizeEl.style.width = '10px';
      resizeEl.style.right = '0px';
      resizeEl.style.bottom = '0px'; // 鼠标拉伸弹窗
      resizeEl.onmousedown = (e) => {
        // 记录初始x位置
        const clientX = e.clientX; // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - resizeEl.offsetLeft;
        const disY = e.clientY - resizeEl.offsetTop;

        // tslint:disable-next-line: only-arrow-functions
        document.onmousemove = function(e) {
          e.preventDefault(); // 移动时禁用默认事件 // 通过事件委托，计算移动的距离
          let x = e.clientX - disX + (e.clientX - clientX); // 这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
          let y = e.clientY - disY; // 比较是否小于最小宽高
          if (x >= w) {
            x = w - 10;
          }

          if (y >= h) {
            y = h;
          }
          dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
          dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
          // 固定底部
          dialogFootEl.style.bottom = '0px';
          dialogFootEl.style.position = 'absolute';
          dialogFootEl.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
        }; // 拉伸结束
        // tslint:disable-next-line: only-arrow-functions
        document.onmouseup = function(e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    }
  });
};
export default DdDrag;
